<!-- 公告栏组件 -->
<template>
	<div class="notice-bar" @click="tipClick">
		<div class="notice-bar__icon">
			<!-- <span>{{ sub_title }}</span> -->
			<svg t="1682407269256" class="svg_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="1934" width="26" height="26">
				<path
					d="M288.3 181.4c0-17.2 14-31.2 31.2-31.2s31.2 14 31.2 31.2-14 31.2-31.2 31.2c-17.2 0.1-31.2-13.9-31.2-31.2z m15.4 0c0 8.8 7.1 15.9 15.9 15.9s15.9-7.1 15.9-15.9c0-8.7-7.1-15.9-15.9-15.9-8.8 0.1-15.9 7.2-15.9 15.9z"
					fill="#47B7F8" p-id="1935"></path>
				<path
					d="M825.6 262.4h13.7v-13.7c0-3.7 3-6.6 6.6-6.6 3.7 0 6.6 3 6.6 6.6v13.7h13.7c3.7 0 6.6 3 6.6 6.6 0 3.7-3 6.6-6.6 6.6h-13.7v13.7c0 3.7-3 6.6-6.6 6.6-3.6 0-6.6-3-6.6-6.6v-13.7h-13.7c-3.6 0-6.6-3-6.6-6.6 0-3.6 3-6.6 6.6-6.6zM71.1 387h13.7v-13.7c0-3.7 3-6.6 6.6-6.6 3.7 0 6.6 3 6.6 6.6V387h13.7c3.7 0 6.6 3 6.6 6.6 0 3.7-3 6.6-6.6 6.6H98v13.7c0 3.7-3 6.6-6.6 6.6-3.6 0-6.6-3-6.6-6.6v-13.7H71.1c-3.6 0-6.6-3-6.6-6.6 0-3.6 3-6.6 6.6-6.6z"
					fill="#F7E42F" p-id="1936"></path>
				<path
					d="M904.7 590.2h15.9v-15.9c0-4.2 3.4-7.7 7.7-7.7 4.2 0 7.7 3.4 7.7 7.7v15.9h15.9c4.2 0 7.7 3.4 7.7 7.7s-3.4 7.7-7.7 7.7H936v15.9c0 4.2-3.4 7.7-7.7 7.7-4.2 0-7.7-3.4-7.7-7.7v-15.9h-15.9c-4.2 0-7.7-3.4-7.7-7.7s3.5-7.7 7.7-7.7z"
					fill="#F8B62D" p-id="1937"></path>
				<path d="M721.7 193m-11.5 0a11.5 11.5 0 1 0 23 0 11.5 11.5 0 1 0-23 0Z" fill="#F8B62D" p-id="1938">
				</path>
				<path d="M206.8 253.7m-15.4 0a15.4 15.4 0 1 0 30.8 0 15.4 15.4 0 1 0-30.8 0Z" fill="#F8B62D"
					p-id="1939"></path>
				<path d="M812.9 362.9m-15.4 0a15.4 15.4 0 1 0 30.8 0 15.4 15.4 0 1 0-30.8 0Z" fill="#F7E42F"
					p-id="1940"></path>
				<path
					d="M782.2 503.4c0-17.2 14-31.2 31.2-31.2s31.2 14 31.2 31.2-14 31.2-31.2 31.2-31.2-14-31.2-31.2z m15.4 0c0 8.8 7.1 15.9 15.9 15.9s15.9-7.1 15.9-15.9c0-8.7-7.1-15.9-15.9-15.9s-15.9 7.1-15.9 15.9z"
					fill="#F8B62D" p-id="1941"></path>
				<path
					d="M204.6 505.3c1.7-1.7 4.4-1.7 6 0 0.8 0.8 1.2 1.9 1.2 3s-0.4 2.2-1.2 3L197 524.9c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2c-1.7-1.7-1.7-4.4 0-6l13.6-13.6zM168.5 541.3c0.8-0.8 1.9-1.2 3-1.2s2.2 0.4 3 1.2c1.7 1.7 1.7 4.4 0 6l-13.6 13.6c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.9-1.2-3s0.4-2.2 1.2-3l13.6-13.6zM171.6 526.2c-1.1 0-2.2-0.4-3-1.2L155 511.4c-0.8-0.8-1.2-1.9-1.2-3s0.4-2.2 1.2-3c1.7-1.7 4.4-1.7 6 0l13.6 13.6c1.7 1.7 1.7 4.4 0 6-0.8 0.7-1.9 1.2-3 1.2zM196.9 541.3l13.6 13.6c0.8 0.8 1.2 1.9 1.2 3s-0.4 2.2-1.2 3c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2l-13.6-13.6c-1.7-1.7-1.7-4.4 0-6 1.6-1.6 4.4-1.6 6 0zM194.3 533.1c0-2.3 1.9-4.3 4.2-4.3h19.3c2.3 0 4.2 1.9 4.2 4.3s-1.9 4.2-4.2 4.2h-19.3c-2.3 0-4.2-1.9-4.2-4.2zM147.6 528.8h19.3c2.3 0 4.3 1.9 4.3 4.3s-1.9 4.2-4.3 4.2h-19.3c-2.3 0-4.3-1.9-4.3-4.2s2-4.3 4.3-4.3zM182.7 493.7c2.3 0 4.3 1.9 4.3 4.2v19.3c0 2.3-1.9 4.2-4.3 4.2s-4.2-1.9-4.2-4.2V498c0-2.4 1.9-4.3 4.2-4.3zM182.7 544.7c2.3 0 4.3 1.9 4.3 4.3v19.3c0 2.3-1.9 4.3-4.3 4.3s-4.2-1.9-4.2-4.3V549c0-2.4 1.9-4.3 4.2-4.3z"
					fill="#FAEE00" p-id="1942"></path>
				<path
					d="M554.7 89.5c1.7-1.7 4.4-1.7 6 0 0.8 0.8 1.2 1.9 1.2 3s-0.4 2.2-1.2 3l-13.6 13.6c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2c-1.7-1.7-1.7-4.4 0-6l13.6-13.6zM518.7 125.5c0.8-0.8 1.9-1.2 3-1.2s2.2 0.4 3 1.2c1.7 1.7 1.7 4.4 0 6l-13.6 13.6c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.9-1.2-3s0.4-2.2 1.2-3l13.6-13.6zM521.7 110.4c-1.1 0-2.2-0.4-3-1.2l-13.6-13.6c-0.8-0.8-1.2-1.9-1.2-3s0.4-2.2 1.2-3c1.7-1.7 4.4-1.7 6 0l13.6 13.6c1.7 1.7 1.7 4.4 0 6-0.8 0.8-1.9 1.2-3 1.2zM547.1 125.5l13.6 13.6c0.8 0.8 1.2 1.9 1.2 3s-0.4 2.2-1.2 3c-0.8 0.8-1.9 1.2-3 1.2s-2.2-0.4-3-1.2l-13.6-13.6c-1.7-1.7-1.7-4.4 0-6 1.6-1.6 4.4-1.6 6 0zM544.5 117.4c0-2.3 1.9-4.3 4.2-4.3H568c2.3 0 4.2 1.9 4.2 4.3s-1.9 4.2-4.2 4.2h-19.3c-2.3 0-4.2-1.9-4.2-4.2zM497.8 113.1h19.3c2.3 0 4.3 1.9 4.3 4.3s-1.9 4.2-4.3 4.2h-19.3c-2.3 0-4.3-1.9-4.3-4.2s1.9-4.3 4.3-4.3zM532.9 78c2.3 0 4.3 1.9 4.3 4.2v19.3c0 2.3-1.9 4.2-4.3 4.2s-4.2-1.9-4.2-4.2V82.3c-0.1-2.4 1.8-4.3 4.2-4.3zM532.9 128.9c2.3 0 4.3 1.9 4.3 4.3v19.3c0 2.3-1.9 4.3-4.3 4.3s-4.2-1.9-4.2-4.3v-19.3c-0.1-2.4 1.8-4.3 4.2-4.3z"
					fill="#F8B62D" p-id="1943"></path>
				<path
					d="M777.6 849.3H272.9c-15.2 0-27.6-12.6-27.6-28.1l69-119.9V509.8c0-118 94.9-214.5 210.9-214.5s210.9 96.5 210.9 214.5v191.5l69 119.9c0.1 15.5-12.3 28.1-27.5 28.1z"
					fill="#FCEE21" p-id="1944"></path>
				<path d="M446.8 272.4c0-33.6 27.3-60.9 60.9-60.9s60.9 27.3 60.9 60.9" fill="#F8B62D" p-id="1945"></path>
				<path
					d="M568.6 283.9c-6.4 0-11.5-5.2-11.5-11.5 0-27.2-22.2-49.4-49.4-49.4s-49.4 22.2-49.4 49.4c0 6.4-5.2 11.5-11.5 11.5s-11.5-5.2-11.5-11.5c0-39.9 32.5-72.4 72.4-72.4 40 0 72.4 32.5 72.4 72.4 0 6.4-5.1 11.5-11.5 11.5z"
					fill="#3E3A39" p-id="1946"></path>
				<path d="M593.8 848.3c0 47.6-38.6 86.2-86.2 86.2s-86.2-38.6-86.2-86.2" fill="#F8B62D" p-id="1947">
				</path>
				<path
					d="M507.7 946c-53.9 0-97.7-43.8-97.7-97.7 0-6.4 5.2-11.5 11.5-11.5S433 842 433 848.3c0 41.2 33.5 74.6 74.6 74.6 41.2 0 74.6-33.5 74.6-74.6 0-6.4 5.2-11.5 11.5-11.5s11.5 5.2 11.5 11.5c0.2 53.9-43.7 97.7-97.5 97.7z"
					fill="#3E3A39" p-id="1948"></path>
				<path
					d="M891.7 946h-27.4c-6.4 0-11.5-5.2-11.5-11.5S858 923 864.3 923h27.4c6.4 0 11.5 5.2 11.5 11.5s-5.1 11.5-11.5 11.5zM158.7 946h-35.1c-6.4 0-11.5-5.2-11.5-11.5s5.2-11.5 11.5-11.5h35.1c6.4 0 11.5 5.2 11.5 11.5s-5.1 11.5-11.5 11.5zM830.4 946H197.5c-6.4 0-11.5-5.2-11.5-11.5s5.2-11.5 11.5-11.5h632.9c6.4 0 11.5 5.2 11.5 11.5s-5.1 11.5-11.5 11.5z"
					fill="#3E3A39" p-id="1949"></path>
				<path
					d="M742.7 502c0-85.6-58.9-158.3-144.2-191.9 61.1 67.6 77.7 169.5 75.5 238.7L669.5 694c-0.2 7.9 2.5 15.7 7.8 21.6l43.2 49.2c16.4 18.7 5.5 48.2-19.2 51.6l-180.6 25.1h264.2c15.4 0 28.1-12.6 28.1-28.1l-70.2-119.9V502z"
					fill="#F8B62D" p-id="1950"></path>
				<path
					d="M320.1 380.4c-1.5 0-3.1-0.3-4.6-0.9-5.8-2.5-8.5-9.3-6-15.2 5-11.5 12.7-21.8 22.5-29.7 4.9-4 12.2-3.3 16.2 1.6s3.3 12.2-1.6 16.2c-6.9 5.6-12.4 12.9-15.9 21-1.9 4.4-6.1 7-10.6 7z"
					fill="#3E3A39" p-id="1951"></path>
				<path
					d="M775.9 860.8H239.5c-22.5 0-40.9-18.3-40.9-40.9 0-2 0.5-4.1 1.6-5.8L272 691.5V494.4c0-32.3 6.5-63.6 19.2-93.1 2.5-5.8 9.3-8.5 15.2-6 5.8 2.5 8.5 9.3 6 15.1-11.5 26.6-17.4 54.8-17.4 83.9v200.2c0 2-0.5 4.1-1.6 5.8l-71.5 122.2c1.3 8.5 8.7 15.1 17.6 15.1h536.4c8.9 0 16.3-6.5 17.6-15.1L722 700.3c-1-1.8-1.6-3.8-1.6-5.8V494.4c0-117.3-95.4-212.7-212.7-212.7-48.6 0-96.3 17-134.1 47.9-4.9 4-12.2 3.3-16.2-1.6s-3.3-12.2 1.6-16.2c42-34.3 94.8-53.1 148.7-53.1 130 0 235.7 105.7 235.7 235.7v197.1l71.8 122.6c1 1.8 1.6 3.8 1.6 5.8-0.1 22.6-18.4 40.9-40.9 40.9z"
					fill="#3E3A39" p-id="1952"></path>
				<path
					d="M354.7 654.7c-6.4 0-11.5-5.2-11.5-11.5V502.4c0-6.4 5.2-11.5 11.5-11.5s11.5 5.2 11.5 11.5v140.8c0 6.3-5.1 11.5-11.5 11.5z"
					fill="#FFFFFF" p-id="1953"></path>
				<path
					d="M357 474.7c-0.8 0-1.5-0.1-2.3-0.2-6.2-1.3-10.3-7.3-9-13.6 4.3-21.7 9.6-35.2 15.6-39.9 5-4 12.2-3.2 16.2 1.8 3.8 4.7 3.2 11.5-1.1 15.6-2.1 3.2-5.8 15.6-8.1 27.1-1.1 5.4-5.9 9.2-11.3 9.2z m18.7-35.8z"
					fill="#FFFFFF" p-id="1954"></path>
			</svg>
		</div>
		<div ref="wrap" class="notice-bar__wrap">
			<div ref="content" class="notice-bar__content" :style="contentStyle">{{ text }}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'NoticeBar',
		props: {
			sub_title: {
				type: String,
				default: '通知：'
			},
			text: {
				type: String,
				default: ''
			},
			speed: {
				type: Number,
				default: 50
			},
			defaultWidth: {
				type: Number,
				default: 375
			}
		},
		data() {
			return {
				contentStyle: {
					transitionDuration: '0s',
					transform: 'translateX(0px)'
				},
				wrapWidth: 0,
				contentWidth: 0,
				time: 0,
				timer: null,
				convertSpeed: 1
			}
		},
		created() {},
		mounted() {
			if (this.text) {
				this.init()
			}
		},
		watch: {
			text(val) {
				this.init()
			}
		},
		methods: {
			init() {
				const _width = window.innerWidth
				this.convertSpeed = _width / this.defaultWidth * this.speed // 根据分辨率转化成不同的速度
				this.wrapWidth = this.$refs.wrap.offsetWidth
				this.contentWidth = this.$refs.content.offsetWidth
				this.startAnimate()
				this.timer = setInterval(() => {
					this.startAnimate()
				}, this.time * 1000)
				this.$once('hook:beforeDestroy', () => {
					clearInterval(this.timer)
					this.timer = null
				})
			},
			startAnimate() {
				this.contentStyle.transitionDuration = '0s'
				this.contentStyle.transform = 'translateX(' + this.wrapWidth + 'px)'
				this.time = (this.wrapWidth + this.contentWidth) / this.convertSpeed
				setTimeout(() => {
					this.contentStyle.transitionDuration = this.time + 's'
					this.contentStyle.transform = 'translateX(-' + this.contentWidth + 'px)'
				}, 200)
			},
			tipClick() {
				this.$emit('click')
			}
		}
	}
</script>
<style scoped lang='scss'>
	@keyframes iconKeyframes {
		from {
			transform: rotate(30deg);
		}

		to {
			transform: rotate(30deg);
		}
	}

	.svg_icon {
		/* animation-name: iconKeyframes;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: both; */
		margin-right: 4px;
	}

	.notice-bar {
		position: relative;
		background-color: #fdf6ec;
		border-radius: 6px;
		padding: 0 12px;
		overflow: hidden;
		width: 100%;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;

		.notice-bar__icon {
			display: flex;
			align-items: center;

			img {
				width: 20px;
				margin-right: 10px;
			}
		}

		.notice-bar__wrap {
			position: relative;
			display: flex;
			flex: 1;
			height: 40px;
			align-items: center;
			overflow: hidden;

			.notice-bar__content {
				position: absolute;
				white-space: nowrap;
				color: #e6a23c;
				font-size: 14px;
				transition-timing-function: linear;
			}
		}
	}
</style>
